<template>
  <div>
    <a-form ref="userform" :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
      autocomplete="off">
      <a-row :gutter="[0, 10]">
        <a-col :span="8" :key="item.id" v-for="item in specimenFields">
          <a-form-item :label="item.name" :name="item.key" :rules="[
            {
              required: validateFields && item.fieldRequired === 1,
              message: '该项不能为空',
            },
          ]">
            <!--字符串-->
            <a-input v-model:value="formState[item.key]" :placeholder="item.memo"
              v-if="item.valueType === 0 && item.editType === 1" clearable :disabled="!editable" />
            <a-input v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 0 && item.editType != 1" clearable :disabled="!editable" />
            <!--整数-->
            <a-input-number v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 1 && item.editType === 1"
              :style="{ width: item.key == 'count' ? '75%' : '100%' }" :min="0" :disabled="!editable" />
            <a-input-number v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 1 && item.editType != 1" style="width: 100%" :min="0" :disabled="!editable" />
            <!--浮点数-->
            <a-input v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 2 && item.editType === 1" type="number" :min="0" :disabled="!editable" />
            <a-input v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 2 && item.editType != 1" type="number" :min="0" :disabled="!editable" />
            <!--日期-->
            <a-date-picker v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 3 && item.editType === 1" clearable style="width: 100%"
              :disabled="!editable"></a-date-picker>
            <a-date-picker v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 3 && item.editType != 1" clearable style="width: 100%"
              :disabled="!editable"></a-date-picker>
            <!--枚举-->
            <a-select v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 4 && item.editType === 1" filterable clearable :disabled="!editable">
              <a-select-option v-for="j in item.valueRange.split('|')" :value="j" :key="j">{{ j }}</a-select-option>
            </a-select>
            <a-select v-model:value="formState[item.key]" :placeholder="item.memo"
              v-else-if="item.valueType === 4 && item.editType != 1" filterable clearable :disabled="!editable">
              <a-select-option v-for="j in item.valueRange.split('|')" :value="j" :key="j">{{ j }}</a-select-option>
            </a-select>
            <a-button type="primary" v-if="item.key == 'count'" style="margin-left: 4%; height: 30px;width:21%"
              @click="submit">确定</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div style="text-align: center; margin-top: 42px" v-if="showbon">
      <a-button type="primary" :loading="false" @click="resetting" v-if="editable">重置</a-button>
      <a-button type="primary" @click="preserve" style="margin-left: 10px">{{ okText }}</a-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref, onMounted, reactive, defineEmits, defineExpose } from 'vue';
import { getcustomerFormData } from '@/api/public';
import { getspecimens } from '../modules/sample_manage/api/register';
import { message, Modal } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['handle', 'register', 'resetting', 'delhandle']);
const props = defineProps({
  // 通过这个变量刷新该组件列表数据
  refreshTrigger: { type: Number, default: 0 },
  count: { type: Number, default: 0 },
  // 是否可编辑
  editable: { type: Boolean, default: true },
  // 是否显示按钮
  showbon: { type: Boolean, default: true },
  // 保存按钮文字
  okText: { type: String, default: '保存' },
  // 取消按钮文字
  cancelText: { type: String, default: '取消' },
  // 是否对字段验证
  validateFields: { type: Boolean, default: true },
  // 允许外部过滤指定字段
  fieldFilter: { type: Function, default: undefined },
});
const specimenFields = ref([]);
const userform = ref();
const formState: any = reactive({});
let editList = [];
const templateCV = async (id) => {
  editList = [];
  let { result } = await getcustomerFormData({ groupId: id });
  result.forEach((item) => {
    formState[item.key] = '';
    if (item.editType == 2) {
      editList.push(item.key);
    }
  });
  specimenFields.value = result;
};
const cancel = async () => {
  if (formState.count <= 0) {
    message.warning('数量最少为1支');
    return (formState.count = null);
  }
  if (formState.count > 100) {
    message.warning('数量不能大于100支');
    return (formState.count = null);
  }
  if (!route.query.id && formState.count <= props.count) {
    return emit('delhandle', formState.count);
  }
  if (formState.count <= props.count) {
    message.warning('修改的数量不能少于之前生成的数量');
    return (formState.count = props.count);
  }
  let count = formState.count - props.count;
  let { result } = await getspecimens({ type: 4, count });
  result.strainInstanceEntityList.forEach(item => {
    item.serial = ''
    // item.serial = Math.floor(Math.random() * 100000000000000)
  })
  emit('handle', result.strainInstanceEntityList);
};
const submit = async () => {
  Modal.confirm({
    title: '您确定要生成编码信息表格吗？',
    onOk: async () => {
      cancel();
    },
  });
};
// 回显
const Feedback = async (val) => {
  editList = [];
  let { result } = await getcustomerFormData({ groupId: val.formworkId });
  result.forEach((item) => {
    formState[item.key] = '';
    if (item.editType == 2) {
      editList.push(item.key);
    }
  });
  specimenFields.value = result;
  specimenFields.value.forEach((item) => {
    if (val[item.key] && val[item.key] != '') {
      if (item.valueType === 3) return (formState[item.key] = dayjs(val[item.key], 'YYYY-MM-DD'));
      formState[item.key] = val[item.key];
    }
  });
};
//保存
const preserve = async () => {
  Modal.confirm({
    title: '您确定要保存吗？',
    onOk: async () => {
      try {
        await userform.value.validateFields();
        let extDataList = [];
        editList.forEach((item) => {
          if (formState[item] != '') {
            extDataList.push({ key: item, value: formState[item] });
          }
        });
        formState.extDataList = extDataList;
        emit('register', formState);
      } catch (errorInfo) {
        console.log('Failed:', errorInfo);
      }
    },
  });
};
//重置
const resetting = async () => {
  editList = [];
  Feedback({});
  userform.value.resetFields();
  emit('resetting');
};
defineExpose({
  Feedback,
  formState,
  resetting,
  preserve,
  templateCV,
});
</script>

<style lang="less" scoped>
.ant-col {
  height: 45px;
}
</style>
